<template>
  <div id="productListOne"
       v-loading="loading"
       element-loading-text="Loading"
       element-loading-spinner="el-icon-loading"
       element-loading-background="rgba(0, 0, 0, 0.8)">
    <f-scroll :scrollStyle="wrapStyle"
              @scrollToEnd="scrollToEnd">
      <div class="content">
        <el-row>
          <el-col :span="4"
                  v-for="item in products"
                  :key="item.retailerProductId + item.goods_id + Math.random() *100">
            <el-card id="my-card">
              <div @click="cardClick(item.retailerProductId ,item.goods_id, item.currency)">
                <div class="img-wrap">
                  <img :src="item.url"
                       alt="">
                  <div class="new"
                       v-show="item.condition_id === 1">New</div>
                </div>
                <div class="word">
                  <div class="price-and-count">
                    <span class="price">${{item.price.USD | priceFilter}}</span>
                    <span class="count">{{item.saleCount}}&nbsp;items sold</span>
                  </div>
                  <div class="desc">
                    <span>{{item.brand}}&nbsp;{{item.model}}&nbsp;{{item.type}}&nbsp;</span>
                  </div>
                  <div class="from">
                    <span>{{item.retailer}}</span>
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </f-scroll>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  data() {
    return {
      products: [],
      init: false,
      wrapStyle: {
        height: ""
      },
      loading: false,
      params: {
        per_page: 20,
        page: 1,
        sortBy: "price",
        keyword: ""
      },
      sort: 1,
      lastPage: 1
    };
  },
  created() {
    this.getData();
  },
  computed: {
    ...mapGetters(["sortBy", "keyWords", "imgUrl", "activeName", "showStyle"])
  },
  mounted() {
    this.$nextTick(() => {
      let dom = document.getElementById("productListOne");
      let content = document.querySelector("#productListOne .content");
      let width = content.innerHeight;
      let len = document.body.clientHeight - dom.offsetTop;
      this.wrapStyle.height = len - 80 + "px";
      window.onresize = () => {
        let len = document.body.clientHeight - dom.offsetTop;
        this.wrapStyle.height = len - 80 + "px";
      };
    });
  },
  methods: {
    getData() {
      this.loading = true;
      let params = Object.assign({}, this.params);
      params.filter = this.filter;
      params.keyword = this.keyWords;
      params.sortBy = [this.params.sortBy, this.sort];
      this.$http.post("goods", params).then(
        res => {
          setTimeout(() => {
            this.loading = false;
          }, 150);
          if (res.data) {
            res.data.forEach(item => {
              if (item.model.indexOf("none") !== -1) {
                item.model = "";
              }
              if(!item.retailerProductId){
                alert("有错")
              }
              item.url = this.imgUrl + item.retailerProductId + "/1.jpg";
            });
            this.products = this.products.concat(res.data);
            dd(this.products);
            this.params.page = res.current_page + 1;
            this.lastPage = res.last_page;
            this.$store.commit("totalProductsChange", res.total * 13);
          }
        },
        err => {
          this.loading = false;
          this.$message.error("服务器错误!!!");
        }
      );
    },
    refresh() {
      this.params.page = 1;
      this.products = [];
      this.getData();
    },
    scroll() {},
    cardClick(productId, goodsId, currency) {
      this.$store.commit("productChange", {
        title: "Viewing Product",
        productId: productId,
        goodsId: goodsId,
        currency: currency
      });
    },
    scrollToEnd() {
      if (this.params.page < this.lastPage) {
        this.getData();
      }
    }
  },
  watch: {
    sortBy(val, old) {
      switch (val) {
        case 0:
          this.params.sortBy = "price";
          this.sort = 0;
          this.refresh();
          break;
        case 1:
          this.params.sortBy = "price";
          this.sort = 1;
          this.refresh();
          break;
        case 2:
          this.params.sortBy = "sales_volume";
          this.sort = 0;
          this.refresh();
          break;
        case 3:
          this.params.sortBy = "sales_volume";
          this.sort = 1;
          this.refresh();
          break;
        case 4:
          this.params.sortBy = "conditions.id";
          this.sort = 1;
          this.refresh();
          break;
        case 5:
          this.params.sortBy = "conditions.id";
          this.sort = 0;
          this.refresh();
          break;
        case 6:
          this.params.sortBy = "goods.created_at";
          this.sort = 1;
          this.refresh();
          break;
        case 7:
          this.params.sortBy = "goods.created_at";
          this.sort = 0;
          this.refresh();
          break;
      }
    },
    keyWords(val, old) {
      this.refresh();
    },
    activeName(val, old) {
      if (this.showStyle === "row" && val === "first") {
        this.refresh();
      }
    },
    filter(curVal, oldVal) {
      if (this.showStyle === "row" && this.activeName === "first") {
        this.refresh();
      }
    }
  }
};
</script>

<style lang="scss">
@import "../../../assets/styles/color.scss";
@import "../../../assets/styles/mixins.scss";
#productListOne {
  .content {
    padding-left: 1.6rem;
    padding-right: 1rem;
    text-align: left;
    margin: 0 auto 0.75rem;
    @media screen and (max-width: 1800px) {
      .el-col-4 {
        width: 20%;
      }
    }
    @media screen and (max-width: 1250px) {
      .el-col-4 {
        width: 25%;
      }
    }
    .el-card {
      display: inline-block;
      width: 96%;
      margin-bottom: 4px;
      box-shadow: none;
      cursor: pointer;
      &:hover {
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        transform: translate3d(0, -2px, 0);
        transition: 0.5s;
      }
      .el-card__body {
        padding: 0;
      }
      .img-wrap {
        width: 100%;
        height: 0;
        padding-bottom: 100%;
        overflow: hidden;
        position: relative;
        .new {
          position: absolute;
          bottom: 0;
          height: 30px;
          line-height: 30px;
          background-color: rgba(#000, 0.4);
          width: 100%;
          text-align: center;
          color: #fff;
        }
      }
      img {
        display: block;
        width: 100%;
        // height: 200px;
      }
      .word {
        padding: 0 0.5rem;
      }
      .price-and-count {
        height: 2rem;
        line-height: 2rem;
        font-size: 1rem;
        .price {
          float: left;
          color: $base;
          font-family: "Georgia";
          font-weight: 600;
        }
        .count {
          float: right;
          color: #999999;
          font-size: 0.7rem;
          font-family: "PingFang SC";
        }
        @include clearfix();
      }
      .desc {
        line-height: 1.5rem;
        height: 1.5rem;
        font-size: 0.7rem;
        text-align: left;
        text-indent: 5px;
        color: #333333;
        font-family: "PingFang SC";
      }
      .from {
        @extend .desc;
        font-size: 0.7rem;
        color: #999999;
      }
    }
  }
}
</style>
